<tr>
	<td colspan="6"><strong>产品信息</strong> <span class="layui-btn layui-btn-sm" type="button" id="productAdd">+ 添加产品</span></td>
</tr>
<tr>
	<td colspan="6">				
		<table id="productTable" class="layui-table layui-table-min" style="margin:0">
			<tr>
				<th width="200">产品名称</th>
				<th width="100">单位</th>
				<th width="100">规格</th>
				<th width="100">销售单价</th>
				<th width="100">数量</th>
				<th width="100">小计</th>
				<th>备注信息</th>
				<th width="60">操作</th>
			</tr>
			{empty name="$detail.content_array"}
			<tr class="product-tr">
				{eq name="is_product" value="1"}
				<td><input type="text" name="product_title[]" value="" class="layui-input product-picker" readonly lay-verify="required" lay-reqText="请完善产品名称"><input type="hidden" name="product_id[]" value="0"></td>
				{else/}
				<td><input type="text" name="product_title[]" value="" class="layui-input" lay-verify="required" lay-reqText="请完善产品名称"><input type="hidden" name="product_id[]" value="0"></td>
				{/eq}
				<td><input type="text" name="product_unit[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入单位"></td>
				<td><input type="text" name="product_specs[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入产品规格"></td>
				<td><input type="text" name="product_price[]" value="0.00" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入销售单价"></td>
				<td><input type="text" name="product_num[]" value="1" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入产品数量"></td>
				<td><input type="text" name="product_subtotal[]" value="0.00" class="layui-input layui-input-readonly" readonly></td>
				<td><input type="text" name="product_remark[]" value="" class="layui-input"></td>
				<td><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>
			</tr>
			{else/}
			{volist name="$detail.content_array" id="vo"}
			<tr class="product-tr">
				{eq name="is_product" value="1"}
				<td><input type="text" name="product_title[]" value="{$vo.product_title|default=''}" class="layui-input product-picker" readonly lay-verify="required" lay-reqText="请完善产品名称"><input type="hidden" name="product_id[]" value="{$vo.product_id|default=0}"></td>
				{else/}
				<td><input type="text" name="product_title[]" value="{$vo.product_title|default=''}" class="layui-input" lay-verify="required" lay-reqText="请完善产品名称"><input type="hidden" name="product_id[]" value="{$vo.product_id|default=0}"></td>
				{/eq}
				<td><input type="text" name="product_unit[]" value="{$vo.product_unit|default=''}" class="layui-input" lay-verify="required" lay-reqText="请输入单位"></td>
				<td><input type="text" name="product_specs[]" value="{$vo.product_specs|default=''}" class="layui-input" lay-verify="required" lay-reqText="请输入产品规格"></td>
				<td><input type="text" name="product_price[]" value="{$vo.product_price|default='0.00'}" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入销售单价"></td>
				<td><input type="text" name="product_num[]" value="{$vo.product_num|default=0}" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入产品数量"></td>
				<td><input type="text" name="product_subtotal[]" value="{$vo.product_subtotal|default='0.00'}" class="layui-input layui-input-readonly" readonly></td>
				<td><input type="text" name="product_remark[]" value="{$vo.product_remark|default=''}" class="layui-input"></td>
				<td><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>
			</tr>
			{/volist}
			{/empty}
		</table>
	</td>
</tr>
<script>
const is_product={$is_product};
function product_fun(layui){
	let form = layui.form,oaPicker = layui.oaPicker;
	
	//选择物品弹窗        
	$('body').on('click','.product-picker',function () {
		let that = $(this),ids = [],titles=[],sale_price=[],unit=[],specs=[],map = {},types = 'product',type = 1;
		let callback = function(data){
			for ( var i = 0; i <data.length; i++){
				ids.push(data[i].id);
				titles.push(data[i].title);
				unit.push(data[i].unit);
				specs.push(data[i].specs);
				sale_price.push(data[i].sale_price);
			}
			that.val(titles.join(','));
			that.next().val(ids.join(','));
			that.parents('.product-tr').find('input').eq(2).val(unit.join(','));
			that.parents('.product-tr').find('input').eq(3).val(specs.join(','));
			that.parents('.product-tr').find('input').eq(4).val(sale_price.join(','));
			that.parents('.product-tr').find('input').eq(6).val(sale_price.join(','));
			count_cost();
		}
		oaPicker.picker(types,type,callback,map);
	});
	
	//添加产品信息表格
	$('#productAdd').on('click',function(){
		var html = '',product_title=' class="layui-input"';
		if(is_product==1){
			product_title=' class="layui-input product-picker" readonly';
		}
		html += '<tr class="product-tr">\
					<td><input type="text" name="product_title[]" value="" '+product_title+' lay-verify="required" lay-reqText="请完善产品名称"><input type="hidden" name="product_id[]" value="0"></td>\
					<td><input type="text" name="product_unit[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入单位"></td>\
					<td><input type="text" name="product_specs[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入产品规格"></td>\
					<td><input type="text" name="product_price[]" value="0.00" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入销售单价"></td>\
					<td><input type="text" name="product_num[]" value="1" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入产品数量"></td>\
					<td><input type="text" name="product_subtotal[]" value="0.00" class="layui-input layui-input-readonly" readonly></td>\
					<td><input type="text" name="product_remark[]" value="" class="layui-input"></td>\
					<td><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>\
				</tr>';
		$('#productTable').append(html).find('.tr-none').remove();
		form.render();
	});	

	$('#productTable').on('click', '[lay-event="del"]', function() {
		if($('.product-tr').length<2){
			layer.msg('至少保留一个产品选项');
			return false;
		}
		$(this).parents('.product-tr').remove();
		count_cost();
	});	
	
	//计算价格
	$('#productTable').on('input', '.input-num', function() {
		var inputs = $(this).parents('.product-tr').find("input");
		var product_price = inputs.eq(4).val();
		var product_num = inputs.eq(5).val();
		var product_amount = (product_price*product_num).toFixed(2);			  
		if(isNaN(product_amount)){ 
			product_amount = 0.00;
		}
		inputs.eq(6).val(product_amount);
		count_cost();
	});
	 
	//计算总价
	function count_cost(){
		var product_subtotal = $('#productTable').find('[name="product_subtotal[]"]');
		var total = 0;
		for (var m = 0; m < product_subtotal.length; m++) {
			total+=$(product_subtotal[m]).val()*1000;
		}
		if(isNaN(total)){ 
			total = 0;
		}
		$('[name="cost"]').val((total/1000).toFixed(2));
	}
}
</script>